<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="JZH">
    <script src="js/jquery-3.1.1.js"></script>
    <title>检测用户输入字数</title>
<style>
    .box{
        width: 500px;
        margin: 0 auto;
    }
    .box .content{
        line-height: 30px;
    }
    .box .right{
        float: right;
    }
    .box .right strong{
        font-size: 26px;
        color: #fa6;
    }
    .input .text{
        width: 100%;
        height: 120px;
        resize: none;
        border: 1px solid #aaa;
        /*inset"内阴影*/
        box-shadow: 0 0 5px #ccc inset;
        padding: 10px;
        font-size: 16px;
    }
    .input .text:focus{
        border-color:#f93;
        box-shadow: none;
        /*先去掉轮廓线再改变边框颜色*/
        outline: none;
    }
</style>
</head>
<body>
    <div class="box">
        <div class="content">
            <span>有什么新鲜事情告诉大家？</span>
            <span class="right">可以发布超过<strong>140</strong>字的新闻</span>
        </div>
        <div class="input"><textarea name="" class="text"></textarea></div>
    </div>
</body>
<html>
<script>
//输入内容时计算字数 
  $('.input .text').keyup(textNum);
//获取输入焦点时计算字数   
  $('.input .text').focus(textNum);
 
//计算字数的方法  
  function textNum(){
    //获取输入文字的长度  
      var length = $(this).val().length;
    //   console.log(length);   

    //当前输入文字总长度(一个中文字符是一个文字,两个英文字符是一个文字)   
      var currentLength = 0;

      if(length > 0){
          for(var i = 0;i < length; i++){
              if($(this).val().charCodeAt(i)>255){
                 //中文字符
                 currentLength += 1;
              }else{
                //英文字符   
                currentLength += 0.5;
              }
         }
         console.log(currentLength);

         var result = Math.ceil(currentLength);

         if(result <　140){
             $('.right').html('已输入<strong style="color:gray;">' + result + '</strong>字');
         }else{
                $('.right').html('已输入<strong style="color:red;">' + result + '</strong>字');
         }
      }
  }  
</script>